<template>
    <div style="background-color: #f4f7fa;" v-loading="loading">
        <search-modal :show.sync="searchMenu" :icon-show="false" :width="360">
            <Row class="mb-10">
                <i-col span="10">
                    <search-modal-title :width="100"><Icon type="ios-search"/>高级查询</search-modal-title>
                </i-col>
                <i-col span="14" style="text-align: right;">
                    <Button size="small" type="primary" @click="initData">查询</Button>
                    <Button size="small" type="primary" @click="reset">重置</Button>
                </i-col>
            </Row>
            <Form :label-width="80">
                <FormItem v-if="$utils.getUserInfo().currentAgentPermission" label="货权方：" style="margin-bottom: 0">
                    <i-select v-model="searchForm.ownerCodeList" size="small" multiple filterable :max-tag-count="1">
                        <i-option
                            v-for="item in $utils.getUserInfo().customerInfoList || []"
                            :key="item.customerPartyID"
                            :value="item.customerPartyCode"
                            :label="item.customerPartyName"
                        ></i-option>
                    </i-select>
                </FormItem>
                <FormItem label="品类：" style="margin-bottom: 0">
                    <i-select v-model="searchForm.matTypCode" size="small" clearable filterable>
                        <i-option v-for="(item, index) in matTypeList" :key="index" :value="item.dictValue">{{ item.dictName }}</i-option>
                    </i-select>
                </FormItem>
                <FormItem label="保质期：" style="margin-bottom: 0">
                    <InputNumber v-model="searchForm.validatePeriod" size="small" style="width: 100%;"></InputNumber>
                </FormItem>
                <FormItem label="质押状态：" style="margin-bottom: 0">
                    <i-select v-model="searchForm.supervisionStatus" size="small" clearable filterable>
                        <i-option value="1">已质押</i-option>
                        <i-option value="0">未质押</i-option>
                    </i-select>
                </FormItem>
                <FormItem label="入库时间：" style="margin-bottom: 0">
                    <DatePicker v-model="searchForm.dateInto" type="daterange" size="small" transfer clearable split-panels></DatePicker>
                </FormItem>
                <FormItem label="生产时间：" style="margin-bottom: 0">
                    <DatePicker v-model="searchForm.dateGen" type="daterange" size="small" transfer clearable split-panels></DatePicker>
                </FormItem>
                <FormItem label="失效时间：" style="margin-bottom: 0">
                    <DatePicker v-model="searchForm.dateExpire" type="daterange" size="small" transfer clearable split-panels></DatePicker>
                </FormItem>
            </Form>
        </search-modal>
        <div class="search-container">
            <el-collapse-transition>
                <div v-show="searchShow">
                    <div class="warehouse" style="margin-bottom: 10px">
                        <p class="title">
                            所在仓库
                            <Button size="small" @click="refresh"><Icon type="md-refresh" :size="18" /></Button>
                        </p>
                        <div class="warehouse-container flex">
                            <Tooltip placement="top" :content="'重量(KGS)：' + (wareList && wareList.length > 0 ? (wareList.reduce((total, item) => total + item.whGoodsWeight, 0)).toFixed(3) : 0)">
                                <div class="warehouse-itemnew" :class="wareAllChecked ? ' warehouse-item__checked' : 'warehouse-item__not-checked'" @click="wareAllCheck">
                                    <p class="flex">
                                        <span style="font-weight: 700;font-size: 16px;">全部</span>
                                    </p>
                                    <p class="flex" style="justify-content: space-between; align-items: center;">
                                        <span style="color: rgba(0, 0, 0, 0.35);">重量(吨) | 柜数</span>
                                        <span style="font-weight: 700;font-size: 16px;">{{ wareList && wareList.length > 0 ? (wareList.reduce((total, item) => total + item.whGoodsWeight, 0) / 1000).toFixed(3) : 0 }} | {{ wareList && wareList.length > 0 ? wareList.reduce((total, item) => total + item.whChestCount, 0) : 0 }}</span>
                                    </p>
                                    <p style="height: 33%"></p>
                                </div>
                            </Tooltip>
                            <Tooltip v-for="item in wareList" :key="item.whId" placement="top" :content="'重量(KGS)：' + item.whGoodsWeight.toFixed(3)">
                                <div class="warehouse-itemnew" :class="item.checked ? ' warehouse-item__checked' : 'warehouse-item__not-checked'" @click="wareClick(item)">
                                    <p class="flex" style="justify-content: space-between; align-items: center;">
                                        <span style="font-weight: 700;font-size: 16px;">{{ item.whName }}</span>
                                    </p>
                                    <p class="flex" style="justify-content: space-between; align-items: center;">
                                        <span style="color: rgba(0, 0, 0, 0.35);">重量(吨) | 柜数</span>
                                        <span style="font-weight: 700;font-size: 16px;">{{ (item.whGoodsWeight / 1000).toFixed(3) }} | {{ item.whChestCount }}</span>
                                    </p>
                                    <p class="flex" style="justify-content: space-between; align-items: center;">
                                        <span style="color: rgba(0, 0, 0, 0.35);">温度&nbsp;|&nbsp;湿度</span>
                                        <span style="font-weight: 700;font-size: 16px;">-{{ item.temperature }}℃&nbsp;|&nbsp;{{ item.humidity }}%</span>
                                    </p>
                                </div>
                            </Tooltip>
                        </div>
                    </div>
<!--                    <div class="stock" style="margin-top: 25px; position: relative;">-->
<!--                        <p class="title">库存统计</p>-->
<!--                        <Icon type="ios-arrow-dropleft" size="25" style="position: absolute;left: 10px;top: calc(50% - 12px);cursor: pointer;" @click="scrollChange('left')" />-->
<!--                        <Icon type="ios-arrow-dropright" size="25" style="position: absolute;right: 10px;top: calc(50% - 12px);cursor: pointer;" @click="scrollChange('right')" />-->
<!--                        <div id="mat-container" class="warehouse-container flex" style="width: 100%; position: relative;overflow-x: auto">-->
<!--                            <div v-for="(item, index) in matList" :key="index" class="warehouse-item" :class="item.checked ? ' warehouse-item__checked' : 'warehouse-item__not-checked'" style="height: 100px; padding-bottom: 10px" @click="matClick(item)">-->
<!--                                <p style="height: 48px; text-overflow: ellipsis;font-weight: 700;font-size: 16px;overflow: hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;">-->
<!--                                    {{ item.matName }}-->
<!--                                </p>-->
<!--                                <p class="flex" style="justify-content: space-between">-->
<!--                                    <span style="color: rgba(0, 0, 0, 0.35);">重量(吨)</span>-->
<!--                                    <span style="font-weight: 700;font-size: 16px;">{{ (item.goodsWeight / 1000).toFixed(3) }}</span>-->
<!--                                </p>-->
<!--                                <p class="flex" style="justify-content: space-between">-->
<!--                                    <span style="color: rgba(0, 0, 0, 0.35);">重量(KGS)</span>-->
<!--                                    <span style="font-weight: 700;font-size: 16px;">{{ (item.goodsWeight).toFixed(3) }}</span>-->
<!--                                </p>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
                </div>
            </el-collapse-transition>
            <div class="bottom-btn" @click="searchShow = !searchShow">
                <Icon type="ios-menu" class="ios-menu" />
            </div>
            <div class="bottom-btn2" style="left: calc(50% - 1px)">
            </div>
        </div>

        <div class="content-container" style="height: auto;" v-loading="tableData.loading">
            <div v-if="wareSelected && wareSelected.length > 0" class="nav-tab">
                <Menu ref="wareMenu" mode="horizontal" style="font-weight: 700;color:#000;padding: 0 30px; height: 70px" :active-name="menuActiveName" @on-select="menuSelect">
                    <MenuItem v-for="item in wareSelected" :key="item.id" :name="item.id">
                        <p style="height: 20px">{{ item.whName }}</p>
                        <p style="height: 20px">({{ getSumWeight(item) }}吨)</p>
                    </MenuItem>
                </Menu>
                <div style="padding-right: 30px">
                    <Input v-model="tableData.searchKey" placeholder="按提单号、箱号、厂号、品名查询" style="width: 200px;" @on-search="initData" search></Input>
                    <span style="color: #4F68E8;cursor: pointer;margin-left: 10px; position: relative;">
                        <Button style="width: 100px;background-color: rgba(79, 104, 232, 1); color:#fff; margin-left: 10px" @click="advancedQuery">高级查询</Button>
                    </span>
                </div>
            </div>

            <div v-if="wareSelected && wareSelected.length > 0" class="operation">
                <Row>
                    <i-col :span="16" style="display: flex; align-items: center">
                        <Checkbox size="large" v-model="allCheck" @on-change="allCheckChange"><span style="font-weight: 700; font-size: 13px;">全选</span></Checkbox>
                        <p style="font-weight: 700; font-size: 13px;margin-left: 30px">共计：{{ (totalWeight / 1000).toFixed(3) }}吨</p>
<!--                        <Button v-if="$utils.checkAuth('PLEDGE_APPLICATION')" style="width: 100px;background-color: #ffffff; color: #4F68E8; margin-left: 30px" @click="pledgeApplication">质押申请</Button>-->
<!--                        <Button v-if="!$utils.getUserInfo().currentAgentPermission" style="width: 100px;background-color: rgba(79, 104, 232, 1); color:#fff; margin-left: 10px" @click="goodsAndOut(0)">货转申请</Button>-->
<!--                        <Button v-if="menuActiveName != 36 && !$utils.getUserInfo().currentAgentPermission" style="width: 100px;background-color: #3E4C64; color:#fff; margin-left: 10px" @click="goodsAndOut(1)">出库申请</Button>-->
<!--                        <Button v-if="menuActiveName == 36 && $utils.checkAuth('CLIENT_APPLICATION_FOR_BONDED_DELIVERY') && !$utils.getUserInfo().currentAgentPermission" style="width: 100px;background-color: #3E4C64; color:#fff; margin-left: 10px" @click="goodsAndOut(2)">保税出库申请</Button>-->
<!--                        <RadioGroup v-model="searchType" size="large" style="margin-left: 10px" @on-change="searchTypeChange">-->
<!--                            <Radio label="container">-->
<!--                                <span>按集装箱</span>-->
<!--                            </Radio>-->
<!--                            <Radio label="mat">-->
<!--                                <span>按品名</span>-->
<!--                            </Radio>-->
<!--                        </RadioGroup>-->
                      <Button style="width: 100px;background-color: rgba(79, 104, 232, 1); color:#fff; margin-left: 10px" @click="exportData">导出</Button>
                    </i-col>
                    <i-col span="8" style="display: flex; justify-content: end;">
                        <Tag style="background-color: #e3e9f9;" v-for="(item, index) in matSelected" :key="index" closable @on-close="matTagClose(item)">{{ item.matName }}</Tag>
                    </i-col>
                </Row>
            </div>

            <div class="content" style="height: calc(100vh - 230px);overflow: auto;">
                <template v-if="tableData.list && tableData.list.length > 0">
                    <div v-for="(item, index) in tableData.list" :key="index">
                        <Card style="margin-bottom: 10px;">
                            <div slot="title">
                                <Row v-if="searchType === 'mat'" style="padding-left: 4px">
                                    <i-col v-if="menuActiveName === 26 || menuActiveName === 37" :span="3">
                                        <Checkbox v-model="item.checked" size="large"><span style="font-weight: 700; font-size: 13px;">{{ item.country }}{{ item.matName }}</span></Checkbox>
                                    </i-col>
                                    <i-col v-if="menuActiveName === 27" :span="3">
                                        <Checkbox v-model="item.checked" size="large"><span style="font-weight: 700; font-size: 13px;">{{ item.country }}{{ item.matName }} {{ item.packName }}</span></Checkbox>
                                    </i-col>
                                    <i-col v-if="menuActiveName === 36" :span="3">
                                        <Checkbox v-model="item.checked" size="large"><span style="font-weight: 700; font-size: 13px;">{{ item.countryName }}{{ item.matName }} {{ item.packName }}</span></Checkbox>
                                    </i-col>
                                    <i-col :span="3" style="text-align: center">
                                        <p>箱号：{{ item.batchAttr07 }}</p>
                                    </i-col>
                                    <i-col :span="3" style="text-align: center">
                                        <p>入库时间：{{ $utils.timestampToDate(item.dateInto) }}</p>
                                    </i-col>
                                    <i-col :span="6" style="border-right: 1px solid rgba(0,0,0,.15); text-align: center">
                                        <p>重量（KGS）：{{ item.sumMatWeight }}</p>
                                    </i-col>
                                    <i-col :span="6" style="text-align: center">
                                        <p>件数：{{ item.totalQty }}(可用件数：{{ item.availableQty }})</p>
                                    </i-col>
                                </Row>
                                <Row v-if="searchType === 'container'" style="padding-left: 4px">
                                    <i-col :span="4">
                                        <Checkbox v-model="item.checked" size="large" @on-change="containerCheckChange($event, item)"><span style="font-weight: 700; font-size: 13px;">箱号：{{ item.batchAttr07 }}</span></Checkbox>
                                    </i-col>
                                    <i-col :span="4">
                                        <p>入库时间：{{ $utils.timestampToDate(item.dateInto) }}</p>
                                    </i-col>
                                    <i-col :span="5">
                                        <p>重量（KGS）：{{ item.sumMatWeight }}</p>
                                    </i-col>
                                    <i-col :span="5">
                                        <p>件数：{{ item.totalQty }}(可用件数：{{ item.availableQty }})</p>
                                    </i-col>
                                </Row>
                            </div>

                            <template v-if="searchType === 'mat'">
                                <Row style="margin-bottom: 20px;">
                                    <i-col :span="5">
                                        <span class="font-bold">货主：</span>
                                        {{ item.ownerName }}
                                    </i-col>
                                    <i-col :span="2">
                                        <span class="font-bold">结算客户：</span>
                                        <span v-if="menuActiveName == 26 || menuActiveName == 37">{{ item.settlementCustomerName === $utils.getUserInfo().entrustingPartyName ? 'Y' : 'N' }}</span>
                                        <span v-else>{{ item.customerName === $utils.getUserInfo().entrustingPartyName ? 'Y' : 'N' }}</span>
                                    </i-col>
                                    <i-col :span="2">
                                        <span class="font-bold">厂号：</span>
                                        {{ item.factoryCode }}
                                    </i-col>
                                    <i-col v-if="menuActiveName !== 27" :span="2">
                                        <template>
                                            <span class="font-bold">包装规格：</span>
                                            {{ item.packageType }}
                                        </template>
                                    </i-col>
                                    <i-col :span="3">
                                        <span class="font-bold">保税性质：</span>
                                        {{ item.goodsBondedProperty ? goodsBondedProperty[item.goodsBondedProperty] : '' }}
                                    </i-col>
                                    <!-- <i-col :span="7">
                                        <span class="font-bold">冻结状态：</span>
                                        {{ item.indBlkRmU === '1' ? '已冻结' : '未冻结' }}
                                    </i-col> -->
                                    <i-col :span="menuActiveName !== 27 ? 2 : 5" style="color: #4F68E8;text-align: right;">
<!--                                        <div v-if="menuActiveName == 26 || menuActiveName == 37">-->
<!--                                            <Dropdown>-->
<!--                                                <p style="cursor: pointer; padding-left: 10px">-->
<!--                                                    查看<Icon type="ios-arrow-down" />-->
<!--                                                </p>-->
<!--                                                <DropdownMenu slot="list" style="text-align: left;">-->
<!--                                                    <DropdownItem name="release" @click.native="getViewFile(item)">附件</DropdownItem>-->
<!--                                                    <DropdownItem name="release" @click.native="$router.push({-->
<!--                                                        name: 'planInfo',-->
<!--                                                        params: {-->
<!--                                                            batchAttr07: item.batchAttr07,-->
<!--                                                            menuActiveName: menuActiveName-->
<!--                                                        }-->
<!--                                                    })">查看计划</DropdownItem>-->
<!--                                                </DropdownMenu>-->
<!--                                            </Dropdown>-->
<!--                                        </div>-->
<!--                                        <div v-if="menuActiveName == 27">-->
<!--                                            <Dropdown>-->
<!--                                                <p style="cursor: pointer; padding-left: 10px">-->
<!--                                                    查看<Icon type="ios-arrow-down" />-->
<!--                                                </p>-->
<!--                                                <DropdownMenu slot="list">-->
<!--                                                    <DropdownItem name="release" @click.native="getViewFile(item)">附件</DropdownItem>-->
<!--                                                    <DropdownItem name="release" @click.native="$router.push({-->
<!--                                                        name: 'planInfo',-->
<!--                                                        params: {-->
<!--                                                            batchAttr07: item.batchAttr07,-->
<!--                                                            menuActiveName: menuActiveName-->
<!--                                                        }-->
<!--                                                    })">查看计划</DropdownItem>-->
<!--                                                </DropdownMenu>-->
<!--                                            </Dropdown>-->
<!--                                        </div>-->
                                    </i-col>
                                </Row>
                                <Row style="margin-bottom: 10px;">
                                    <i-col :span="3">
                                        <span class="font-bold">提单号：</span>
                                        {{ item.batchAttr08 }}
                                    </i-col>
                                    <i-col :span="3">
                                        <span class="font-bold">品类：</span>
                                        {{ item.matTypName }}
                                    </i-col>
                                    <i-col :span="3">
                                        <span class="font-bold">生产日期：</span>
                                        {{ item.dateGen ? $utils.timestampToDate(item.dateGen) : '' }}
                                    </i-col>
                                    <i-col :span="3">
                                        <span class="font-bold">失效日期：</span>
                                        {{ $utils.timestampToDate(item.dateExpire) }}
                                    </i-col>
                                    <i-col v-if="menuActiveName === 36" span="4">
                                        <span class="font-bold">商品料号：</span>
                                        {{ item.matCode }}
                                    </i-col>
                                    <i-col v-if="menuActiveName === 36" span="4">
                                        <span class="font-bold">商品编码：</span>
                                        {{ item.hscode }}
                                    </i-col>
                                    <i-col v-if="menuActiveName === 27" :span="3">
                                        <span class="font-bold">船名：</span>
                                        {{ item.batchAttr14 }}
                                    </i-col>
                                    <i-col v-if="menuActiveName === 27" :span="3">
                                        <span class="font-bold">航次：</span>
                                        {{ item.batchAttr16 }}
                                    </i-col>
                                    <i-col v-if="menuActiveName === 27" :span="3">
                                        <span class="font-bold">批次号：</span>
                                        {{ item.batchNum }}
                                    </i-col>
                                    <i-col v-if="menuActiveName === 27" :span="3">
                                        <span class="font-bold">合同号：</span>
                                        {{ item.batchAttr13 }}
                                    </i-col>
                                </Row>
                                <Row v-if="menuActiveName === 36" style="margin-top:20px">
                                    <i-col v-if="menuActiveName === 36" span="3">
                                        <span class="font-bold">币制：</span>
                                        {{ item.dclCurrcd }}
                                    </i-col>
                                    <i-col v-if="menuActiveName === 36" span="3">
                                        <span class="font-bold">单价：</span>
                                        {{ item.dclUprcAmt }}
                                    </i-col>
                                    <i-col v-if="menuActiveName === 36" span="4">
                                        <span class="font-bold">总价：</span>
                                        {{ item.dclTotalAmt }}
                                    </i-col>
                                </Row>
                            </template>

                            <template v-if="searchType === 'container'">
                                <Row>
                                    <i-col :span="6">
                                        <span class="font-bold">货主：</span>
                                        <span>{{ item.ownerName }}</span>
                                    </i-col>
                                    <i-col v-if="belongUserCustomerList.length" :span="5">
                                        <span class="font-bold">结算客户：</span>
                                        <span v-if="menuActiveName === 26 || menuActiveName === 37">{{ agentPermission(item.settlementCustomerName) }}</span>
                                        <span v-else>{{ agentPermission(item.customerName) }}</span>
                                    </i-col>
                                    <i-col v-else-if="menuActiveName === 26 || menuActiveName === 37" :span="5">
                                        <span class="font-bold">结算客户：</span>
                                        <span v-if="menuActiveName === 26 || menuActiveName === 37">{{ item.settlementCustomerName === $utils.getUserInfo().entrustingPartyName ? 'Y' : 'N' }}</span>
                                        <span v-else>{{ item.customerName === $utils.getUserInfo().entrustingPartyName ? 'Y' : 'N' }}</span>
                                    </i-col>
                                    <i-col v-else span="4">
                                        <span class="font-bold">结算客户：</span>
                                        <span v-if="menuActiveName == 26 || menuActiveName == 37">{{ item.settlementCustomerName === $utils.getUserInfo().entrustingPartyName ? 'Y' : 'N' }}</span>
                                        <span v-else>{{ item.customerName === $utils.getUserInfo().entrustingPartyName ? 'Y' : 'N' }}</span>
                                    </i-col>
                                    <i-col :span="5">
                                        <span class="font-bold">保税性质：</span>
                                        {{ item.goodsBondedProperty ? goodsBondedProperty[item.goodsBondedProperty] : '' }}
                                    </i-col>

                                    <i-col :span="7" v-if="menuActiveName !== 26 && menuActiveName != 37">
                                        <span class="font-bold">提单号：</span>
                                        {{ item.batchAttr08 }}
                                    </i-col>
                                    <i-col :span="6" v-if="menuActiveName == 26 || menuActiveName == 37">
                                        <span class="font-bold">提单号：</span>
                                        {{ item.batchAttr08 }}
                                    </i-col>
                                    <i-col :span="2" v-if="menuActiveName === 36">
<!--                                        <p class="speedOfProgress" style="font-weight: normal;color: #4f68e8;" @click="speedOfProgressClick(item)">-->
<!--                                            {{ item.speedOfProgressShow ? '收起详情' : '展开详情' }}<Icon type="ios-arrow-down" :class="item.arrowClass" />-->
<!--                                        </p>-->
                                    </i-col>
                                    <i-col :span="2" style="color: #4F68E8;">
<!--                                            <div v-if="menuActiveName == 26 || menuActiveName == 37">-->
<!--                                                <Dropdown>-->
<!--                                                    <p style="cursor: pointer; padding-left: 10px">-->
<!--                                                        查看<Icon type="ios-arrow-down" />-->
<!--                                                    </p>-->
<!--                                                    <DropdownMenu slot="list">-->
<!--                                                        <DropdownItem name="release" @click.native="getViewFile(item)">附件</DropdownItem>-->
<!--                                                        <DropdownItem name="release" @click.native="$router.push({-->
<!--                                                        name: 'planInfo',-->
<!--                                                        params: {-->
<!--                                                            batchAttr07: item.batchAttr07,-->
<!--                                                            menuActiveName: menuActiveName-->
<!--                                                        }-->
<!--                                                    })">查看计划</DropdownItem>-->
<!--                                                    </DropdownMenu>-->
<!--                                                </Dropdown>-->
<!--                                            </div>-->
<!--                                            <div v-if="menuActiveName == 27">-->
<!--                                                <Dropdown>-->
<!--                                                    <p style="cursor: pointer; padding-left: 10px">-->
<!--                                                        查看<Icon type="ios-arrow-down" />-->
<!--                                                    </p>-->
<!--                                                    <DropdownMenu slot="list">-->
<!--                                                        <DropdownItem name="release" @click.native="getViewFile(item)">附件</DropdownItem>-->
<!--                                                        <DropdownItem name="release" @click.native="$router.push({-->
<!--                                                            name: 'planInfo',-->
<!--                                                            params: {-->
<!--                                                                batchAttr07: item.batchAttr07,-->
<!--                                                                menuActiveName: menuActiveName-->
<!--                                                            }-->
<!--                                                        })">查看计划</DropdownItem>-->
<!--                                                    </DropdownMenu>-->
<!--                                                </Dropdown>-->
<!--                                            </div>-->
                                    </i-col>
                                </Row>
                                <Row style="margin-top: 10px;">
                                    <i-col v-if="menuActiveName === 27" :span="3">
                                        <span class="font-bold">船名：</span>
                                        {{ item.batchAttr14 }}
                                    </i-col>
                                    <i-col v-if="menuActiveName === 27" :span="3">
                                        <span class="font-bold">航次：</span>
                                        {{ item.batchAttr16 }}
                                    </i-col>
                                    <i-col v-if="menuActiveName === 27" :span="16">
                                        <span class="font-bold">合同号：</span>
                                        {{ item.batchAttr13 }}
                                    </i-col>
                                    <i-col v-if="menuActiveName == 26 || menuActiveName == 37" :span="22"></i-col>
                                    <i-col :span="2" v-if="menuActiveName == 26 || menuActiveName == 37 || menuActiveName === 27">
<!--                                        <p class="speedOfProgress" style="font-weight: normal;color: #4f68e8;" @click="speedOfProgressClick(item)">-->
<!--                                            {{ item.speedOfProgressShow ? '收起详情' : '展开详情' }}<Icon type="ios-arrow-down" :class="item.arrowClass" />-->
<!--                                        </p>-->
                                    </i-col>
                                </Row>

                                <el-collapse-transition>
                                    <div v-if="item.speedOfProgressShow" style="margin-top: 20px" v-loading="item.loading">
                                        <div v-for="(goods, index) in item.stockList" :key="index" style="margin-bottom: 10px;background-color: rgba(244, 247, 250, 1);padding: 20px 0 20px 30px;">
                                            <Row style="margin-bottom: 20px;">
                                                <i-col v-if="menuActiveName == 26 || menuActiveName == 37" span="8">
                                                    <Checkbox v-model="goods.checked" size="large">
                                                        <span class="font-bold">货物描述：</span>
                                                        {{ goods.country }}{{ goods.matName }}
                                                    </Checkbox>
                                                </i-col>
                                                <i-col v-if="menuActiveName === 27" span="8">
                                                    <Checkbox v-model="goods.checked" size="large">
                                                        <span class="font-bold">货物描述：</span>
                                                        {{ goods.country }}{{ goods.matName }} {{ goods.packName }}
                                                    </Checkbox>
                                                </i-col>
                                                <i-col v-if="menuActiveName === 36" span="8">
                                                    <Checkbox v-model="goods.checked" size="large">
                                                        <span class="font-bold">货物描述：</span>
                                                        {{ goods.countryName }}{{ goods.matName }} {{ goods.packName }}
                                                    </Checkbox>
                                                </i-col>
                                                <i-col span="4">
                                                    <span class="font-bold">重量(KGS)：</span>
                                                    {{ goods.sumMatWeight }}
                                                </i-col>
                                                <i-col span="4">
                                                    <span class="font-bold">件数：</span>
                                                    {{ goods.totalQty }}(可用件数：{{ goods.availableQty }})
                                                </i-col>
                                                <i-col span="4">
                                                    <span class="font-bold">厂号：</span>
                                                    {{ goods.factoryCode }}
                                                </i-col>
                                                <i-col span="4" v-if="menuActiveName === 27">
                                                    <span class="font-bold">批次号：</span>
                                                    {{ goods.batchNum }}
                                                </i-col>
                                                <i-col span="4" v-if="menuActiveName === 36">
                                                    <span class="font-bold">批次号：</span>
                                                    {{ goods.wmsBatchNum }}
                                                </i-col>
                                                <i-col span="4">
                                                    <template v-if="menuActiveName !== 27 && menuActiveName !== 36">
                                                        <span class="font-bold">包装规格：</span>
                                                        {{ goods.packageType }}
                                                    </template>
                                                </i-col>
                                            </Row>
                                            <Row>
                                                <i-col span="4">
                                                    <span class="font-bold">品类：</span>
                                                    {{ goods.matTypName}}
                                                </i-col>
                                                <i-col span="4">
                                                    <span class="font-bold">生产日期：</span>
                                                    {{ goods.dateGen ? $utils.timestampToDate(goods.dateGen) : '' }}
                                                </i-col>
                                                <i-col span="4">
                                                    <span class="font-bold">失效日期：</span>
                                                    {{ $utils.timestampToDate(goods.dateExpire) }}
                                                </i-col>
                                                <!-- <i-col span="4">
                                                    <span class="font-bold">冻结状态：</span>
                                                    {{ goods.indBlkRmU === '1' ? '已冻结' : '未冻结' }}
                                                </i-col> -->
                                                <i-col v-if="menuActiveName === 36" span="4">
                                                    <span class="font-bold">商品料号：</span>
                                                    {{ goods.matCode }}
                                                </i-col>
                                                <i-col v-if="menuActiveName === 36" span="4">
                                                    <span class="font-bold">商品编码：</span>
                                                    {{ goods.hscode }}
                                                </i-col>
                                            </Row>
                                            <Row v-if="menuActiveName === 36" style="margin-top:20px">
                                                <i-col v-if="menuActiveName === 36" span="4">
                                                    <span class="font-bold">币制：</span>
                                                    {{ goods.dclCurrcd }}
                                                </i-col>
                                                <i-col v-if="menuActiveName === 36" span="4">
                                                    <span class="font-bold">单价：</span>
                                                    {{ goods.dclUprcAmt }}
                                                </i-col>
                                                <i-col v-if="menuActiveName === 36" span="4">
                                                    <span class="font-bold">总价：</span>
                                                    {{ goods.dclTotalAmt }}
                                                </i-col>
                                            </Row>
                                        </div>
                                    </div>
                                </el-collapse-transition>
                            </template>
                        </Card>

                    </div>
                </template>
                <el-empty v-else description="数据为空"></el-empty>

                <div style="width: 100%; display: flex; justify-content: end;padding-top: 10px;">
                    <Page :total="tableData.total" :current="tableData.pageNum" :page-size="tableData.pageSize" :page-size-opts="tableData.pageOptionsList"
                          @on-change="pageChange" @on-page-size-change="pageSizeChange" show-sizer show-total></Page>
                </div>
                <separate-order-print ref="print" :print-info="printData" :orderNum="orderNum"></separate-order-print>
                <Modal
                    v-model="showPrintTC"
                    width="1000">
                    <into-plan-print :wmsUrl="wmsUrl" :TCorderNum="orderNum" v-if="showPrintTC"></into-plan-print>
                </Modal>
                <Modal
                    v-model="showPrintTCoutTo"
                    width="1000">
                    <outPlanInfo :wmsUrl="wmsUrl" :TCorderNum="orderNum" v-if="showPrintTCoutTo"></outPlanInfo>
                </Modal>
                <el-dialog :visible.sync="dialogTableVisible" title="附件" width="65%">
                    <Row>
                        <Form :model="attachmentItem" :label-width="50">
                            <i-col :span="10">
                                <FormItem :label-width="0">
                                    <el-button type="primary" size="mini" @click="downloadAttachment" :loading="attachmentLoading">下载</el-button>
                                </FormItem>
                            </i-col>
                            <i-col :span="5">
                                <FormItem label="关键字">
                                    <el-input v-model="attachmentItem.searchKey" placeholder="按车号、文件名称查询" size="mini" style="width: 100%;" clearable></el-input>
                                </FormItem>
                            </i-col>
                            <i-col :span="4">
                                <FormItem label="计划类型" :label-width="70">
                                    <el-select v-model="attachmentItem.searchOrderType" size="mini" clearable>
                                        <el-option
                                            v-for="item in searchOrderTypeList"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </FormItem>
                            </i-col>
                            <i-col :span="5">
                                <FormItem>
                                    <el-button type="primary" size="mini" @click="getViewFile(selectRowItem)">查询</el-button>
                                    <el-button type="primary" size="mini" @click="resetAttachment">重置</el-button>
                                </FormItem>
                            </i-col>
                        </Form>
                    </Row>
                    <el-table :data="pageData.list"
                              v-loading="pageData.loading"
                              @selection-change="handleSelectionChange">
                        <el-table-column
                            type="selection"
                            width="36">
                        </el-table-column>
                        <el-table-column
                            label="序号"
                            type="index"
                            width="50"
                            align="center">
                        </el-table-column>
                        <el-table-column
                            v-for="(item, key) in column" :key="key"
                            :prop="item.key"
                            :label="item.title"
                            :min-width="item.width"
                            align="center"
                            :sortable="item.sortable"
                            :show-overflow-tooltip="true">
                            <template slot-scope="scope">
                                <template v-if="item.type !== 'template'">
                                    {{$table.tableRowFormat(scope.row, item)}}
                                </template>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="100" fixed="right">
                            <template slot-scope="scope">
                                <a @click="lookFile(scope.row)"><span style="color: #4f68e8">预览</span></a>
                            </template>
                        </el-table-column>
                    </el-table>
                    <br>
                    <Row class="margin-top-10">
                        <Page :total="pageData.total" :current="pageData.pageNum" :page-size="pageData.pageSize"
                              :page-size-opts="pageData.pageOptionsList"
                              size="small" @on-change="attachmentPageChange" @on-page-size-change="attachmentPageSizeChange" show-elevator
                              show-sizer></Page>
                    </Row>
                </el-dialog>
                <PdfViewModal ref="pdfViewModal"></PdfViewModal>
            </div>
        </div>

        <el-dialog
            top="5vh"
            width="30vw"
            :visible.sync="businessTypeModalShow"
            title="新增商贸订单"
            z-index="1000"
            :destroy-on-close="true"
            :close-on-click-modal="false"
            @close="businessTypeModalShow = false">
                <span style="width:100%;display:inline-block;margin-top: 15px;">
                    <el-row style="height: 40px;line-height: 40px;">
                        <el-col :span="20" class="checkbox-label">运营企业</el-col>
                    </el-row>
                    <el-select
                        v-model="selectCompanyId"
                        placeholder="请选择"
                        style="width: 100%"
                        filterable>
                        <el-option v-for="i in customerCompanyList" :key="i.dictValue" :label="i.dictName" :value="i.dictValue" />
                    </el-select>
                </span>

                <template #footer>
                    <el-button size="mini" type="warning" @click="businessTypeModalShow = false">取消</el-button>
                    <el-button :loading="confirmLoading" size="mini" type="primary" @click="confirmSelectBusinessType">确认</el-button>
                </template>
        </el-dialog>
    </div>
</template>

<script>
import { getAllWareList,
    stockPageList,
    queryStock,
    queryStockList,
    queryWarehouseStock,
    businessItemPageList,
    matTypeQuery,
    exportSummaryExcel,
    pushCcisStockInfo,
    selectCustomerInfoByDto } from '@/api/warehouse/home.js';
import axios from 'axios';
import _ from 'lodash';
import {selectPdf, getSeparateOrderDetail, customerDownload, REdoc, selectEDocByBusinessItem} from '@/api/planInfo.js'
import fileDownload from 'js-file-download';
import SeparateOrderPrint from "./separate-order-print";
import intoPlanPrint from './into-plan-print'
import outPlanInfo from './outPlanInfo'
import BigNumber from 'bignumber.js';
import SearchModal from '@/components/search-modal/index.vue';
import SearchModalTitle from '@/components/search-modal/search-modal-title/index.vue';
import PdfViewModal from '@/components/pdfViewModal/pdfViewModal';
import baseCodeApi from '@/api/baseCode';
import { getCurrentAgentPermissionWareHouse } from '@/libs/handleWareHouseList';
export default {
    name: 'index',
    components: {
        SeparateOrderPrint,
        intoPlanPrint,
        outPlanInfo,
        SearchModal,
        SearchModalTitle,
        PdfViewModal
    },
    data() {
        return {
            confirmLoading: false,
            businessTypeModalShow: false,
            customerCompanyList: [],
            selectCompanyId: '',
            attachmentLoading: false,
            attachmentItem: {
                searchKey: '',
                searchOrderType: null
            },
            searchOrderTypeList: [
                {value: 'inPlan', label: '入库'},
                {value: 'outPlan', label: '出库'},
            ],
            column: [
                {
                    key: 'containerNum',
                    title: '箱号',
                    width: 80
                },
                {
                    key: 'carNo',
                    title: '车号',
                    width: 80
                },
                {
                    key: 'fileUploadSource',
                    title: '计划类型',
                    width: 50,
                    type: 'format',
                    format: {
                        'inPlan': '入库',
                        'outPlan': '出库'
                    }
                },
                {
                    key: 'displayName',
                    title: '文件名称',
                    width: 140
                },
                {
                    key: 'createdDate',
                    title: '创建时间',
                    width: 100,
                    type: 'date'
                },
                {
                    key: 'remark',
                    title: '备注',
                    width: 140
                },
            ],
            selectRowItem: {},
            dialogTableVisible: false,
            showPrintTCoutTo: false,
            showPrintTC: false,
            printData: {},
            pageData: {
                loading: false,
                list: [],
                pageNum: 1,
                pageSize: 10,
                total: 0,
                pageOptionsList: [1, 10, 20, 30, 40]
            },
            selectionList: [],
            customerCode: '',
            arrowClass: '',
            speedOfProgressShow: false,
            searchForm: {
                matTypCode: null,
                validatePeriod: null,
                supervisionStatus: null,
                productStatus: null,
                qualityStatus: null,
                dateInto: [],
                dateGen: [],
                dateExpire: [],
            },
            matTypeList: [],
            cancel: '',
            productStatus: {
                '1': '正品',
                '2': '不良品',
                '3': '退货正品',
                '4': '破箱'
            },
            qualityStatus: {
                'F': '合格',
                'U': '不合格'
            },
            goodsBondedProperty: {
                '1': '一般贸易',
                '2': '保税'
            },
            dataSelected: [],
            containerDataSelected: [],
            wareSelected: [],
            matSelected: [],
            searchType: 'container',
            allCheck: false,
            wareAllChecked: false,
            searchShow: true,
            wareList: [],
            ccisWareList: [],
            matList: [],
            matWarehouseList: [],
            menuActiveName: null,
            tableData: {
                filterList: [],
                pageNum: 1,
                pageSize: 10,
                searchKey: '',
                sortList: [],
                list: [],
                total: 0,
                loading: false,
                pageOptionsList: [10, 20, 30, 40]
            },
            wmsUrl: '',
            loading: false,
            orderNum: '',
            dataInfoList: [],
            searchMenu: false,
            ownerCodeList: []
        };
    },
    computed: {
        totalWeight() {
            if (this.searchType === 'container') {
                return this.containerDataSelected.reduce((sum, item) => {
                    return sum + Number(item.sumMatWeight);
                }, 0);
            } else {
                return this.dataSelected.reduce((sum, item) => {
                    return sum + Number(item.sumMatWeight);
                }, 0);
            }
        },
        belongUserCustomerList() {
            return window.localStorage.getItem('belongUserCustomerList') ? JSON.parse(window.localStorage.getItem('belongUserCustomerList')) : [];
        },
        agentPermission() {
            return function (val) {
                if (this.belongUserCustomerList.length && this.belongUserCustomerList.some(item => item.customerName == val)) {
                    return 'Y'
                } else {
                    return 'N'
                }
            }
        }
    },
    methods: {
        lookFile(row) {
            let suffix = row.fileName.split('.')[1].toLowerCase();
            if (suffix != 'pdf' && suffix != 'png' && suffix != 'jpg' && suffix != 'jpeg') {
                this.$message.warning('不能预览非PDF、png、jpg、jpeg格式的文件');
                return;
            }
            this.$refs.pdfViewModal.loadFile(row, this.menuActiveName);
        },
        attachmentPageChange(pageNum) {
            this.pageData.pageNum = pageNum;
            this.getViewFile(this.selectRowItem);
        },
        attachmentPageSizeChange(pageSize) {
            this.pageData.pageSize = pageSize;
            this.getViewFile(this.selectRowItem);
        },
        resetAttachment() {
            this.attachmentItem = {};
            this.getViewFile(this.selectRowItem);
        },
        getViewFile(item) {
            this.selectRowItem = item;
            this.pageData.list = [];
            this.dialogTableVisible = true
            let body= {
                pageNum : this.pageData.pageNum,
                pageSize: this.pageData.pageSize,
                sortList: [{
                    sortKey: "createdDate",
                    sortValue: "desc"
                }],
                batchAttr07: item.batchAttr07,
                ownerCode: item.ownerCode,
                searchKey: this.attachmentItem.searchKey,
                searchOrderType: this.attachmentItem.searchOrderType
            }
            this.pageData.loading = true;
            selectEDocByBusinessItem(body, this.wmsUrl).then(({data}) => {
                if (data.returnCode === 200) {
                    data.returnData.pageInfo.list.forEach((item) => {
                        item.createdDate = this.$utils.timestampToDate(item.createdDate)
                    });
                    this.pageData.list = data.returnData.pageInfo.list;
                    this.pageData.total = data.returnData.pageInfo.total;
                    this.pageData.list.forEach(gridItem => {
                        gridItem.containerNum = item.batchAttr07;
                    })
                }
            }).finally(() => {
                this.pageData.loading = false;
            })
        },
        async downloadAttachment() {
            if (!this.selectionList || this.selectionList.length === 0) {
                this.$message.warning('请选择一条信息操作')
                return;
            }
            let sum = 0;
            this.attachmentLoading = true;
            for (const item of this.selectionList) {
                let body = {
                    "id": item.id,
                    "customerCode": null,
                    "businessNum": item.businessNum,
                    "businessType": null,
                    "fileName": item.fileName,
                    "fileUrl": item.fileUrl,
                    "remark": null,
                    "createdBy": null,
                    "createdDate": item.createdDate,
                    "lastModifiedBy": null,
                    "lastModifiedTime": null,
                    "deleteFlag": 0,
                    "fileSource": "F",
                    "businessItem": null,
                    "fileType": "null",
                    "fileTypeList": null,
                    "minioObjectName": null,
                    "displayName": item.displayName,
                    "fileSuffix": "pdf",
                    "fileSuffixEdit": "pdf",
                    "shortFileName": ''
                }
                const data = await customerDownload(body, this.wmsUrl);
                if (data.status === 200) {
                    sum++;
                    fileDownload(data.data, 'EDOC' + body.fileName.split(',')[0].toLowerCase());
                }
            }
            if (sum === this.selectionList.length) {
                this.attachmentLoading = false;
                this.$Message.success('操作成功')
            }
        },
        handleSelectionChange(selection){
            this.selectionList = selection;
        },
        advancedQuery() {
            this.searchMenu = true;
            this.searchShow = false;
        },
        getSumWeight(item) {
            if (this.tableData.loading) {
                if (this.matSelected.length > 0 && this.matWarehouseList && this.matWarehouseList[item.id]) {
                    return (this.matWarehouseList[item.id].filter(x => this.matSelected.find(mat => mat.matName === x.matName)).reduce((sum, y) => sum + y.goodsWeight, 0) / 1000).toFixed(3);
                }
                return (item.whGoodsWeight / 1000).toFixed(3);
            }
            if (this.menuActiveName === item.id) {
                if (this.searchType === 'container') {
                    return (this.tableData.list.reduce((sum, x) => sum + x.sumMatWeight, 0) / 1000).toFixed(3);
                } else {
                    return (this.tableData.list.reduce((sum, x) => sum + x.sumMatWeight, 0) / 1000).toFixed(3);
                }
            }
            if (this.matSelected.length > 0 && this.matWarehouseList && this.matWarehouseList[item.id]) {
                return (this.matWarehouseList[item.id].filter(x => this.matSelected.find(mat => mat.matName === x.matName)).reduce((sum, y) => sum + y.goodsWeight, 0) / 1000).toFixed(3);
            }
            return (item.whGoodsWeight / 1000).toFixed(3);
        },
        goodsAndOut(type){
            if (this.searchType == 'container') {
                if (this.containerDataSelected.length > 0 && this.containerDataSelected.every(x => !x.availableQty || x.availableQty == 0)) {
                    this.$Modal.warning({
                        title: '提示',
                        content: '您选择的库存已全部在申请作业中，不能重复申请，请检查或联系业务人员咨询，谢谢！',
                        okText: '关闭'
                    });
                    return;
                }
                // if (this.containerDataSelected.find(x => x.ownerName !== this.$utils.getUserInfo().entrustingPartyName)) {
                //     this.$Message.error('请选择货主为当前所属客户的数据！');
                //     return;
                // }
                if (this.containerDataSelected.length > 0) {
                    if (type == 0) {
                        this.containerDataSelected.forEach((item) => {
                            this.$nextTick(() => {
                                var a = setInterval(() => {
                                    if (this.dataInfoList.length > 0) {
                                        this.dataInfoList.some((item) => {
                                            if (item.indBlkRmU != 1 && item.supervisionStatus != 1) {
                                                clearInterval(a)
                                                this.$router.push({
                                                    name: 'goodsTransfer',
                                                    query: {
                                                        tableData: JSON.stringify(this.dataInfoList),
                                                        menuActiveName: JSON.stringify(this.menuActiveName),
                                                        traceNum: JSON.stringify(item.traceNum),
                                                        wareList:JSON.stringify(this.wareList),
                                                        wmsUrl:JSON.stringify(this.wmsUrl),
                                                        ccisCustomerCode:JSON.stringify(this.customerCode)
                                                    }
                                                })
                                            } else {
                                                clearInterval(a);
                                                this.$Message.warning('存在已冻结/已质押的货品')
                                                return true;
                                            }
                                        })
                                    }
                                }, 300)
                            })
                            this.speedOfProgressClick(item)
                            item.speedOfProgressShow = false;
                        })
                    } else if (type == 1) {
                        this.containerDataSelected.forEach((item) => {
                            this.$nextTick(() => {
                                var a = setInterval(() => {
                                    this.dataInfoList.some((item) => {
                                        if (item.indBlkRmU != 1 && item.supervisionStatus != 1 && item.goodsBondedProperty != 2) {
                                            clearInterval(a)
                                            this.$router.push({
                                                name: 'OutPlanInfo',
                                                query: {
                                                    tableData: JSON.stringify(this.dataInfoList),
                                                    menuActiveName: JSON.stringify(this.menuActiveName),
                                                    wareList:JSON.stringify(this.wareList),
                                                    wmsUrl:JSON.stringify(this.wmsUrl),
                                                    ccisCustomerCode:JSON.stringify(this.customerCode)
                                                }
                                            })
                                        } else {
                                            clearInterval(a)
                                            this.$Message.warning('存在已冻结/已质押/保税的货品')
                                            return true;
                                        }
                                    })
                                },300)
                            })
                            this.speedOfProgressClick(item)
                            item.speedOfProgressShow = false;
                        })
                    } else if (type == 2) {
                        this.containerDataSelected.forEach((item) => {
                            this.$nextTick(() => {
                                var a = setInterval(() => {
                                    this.dataInfoList.some((item) => {
                                        if (item.indBlkRmU != 1 && item.supervisionStatus != 1) {
                                            clearInterval(a)
                                            this.$router.push({
                                                name: 'bondedWarehousingInfo',
                                                query: {
                                                    tableData: JSON.stringify(this.dataInfoList),
                                                    menuActiveName: JSON.stringify(this.menuActiveName),
                                                    wareList:JSON.stringify(this.wareList),
                                                    wmsUrl:JSON.stringify(this.wmsUrl),
                                                    ccisCustomerCode:JSON.stringify(this.customerCode)
                                                }
                                            })
                                        } else {
                                            clearInterval(a)
                                            this.$Message.warning('存在已冻结/已质押的货品')
                                            return true;
                                        }
                                    })
                                },300)
                            })
                            this.speedOfProgressClick(item)
                            item.speedOfProgressShow = false;
                        })
                    }
                } else {
                    this.$Message.warning('未选择货物, 请选择货物')
                }
            } else {
                if (this.dataSelected.length > 0 && this.dataSelected.every(x => !x.availableQty || x.availableQty == 0)) {
                    this.$Modal.warning({
                        title: '提示',
                        content: '您选择的库存已全部在申请作业中，不能重复申请，请检查或联系业务人员咨询，谢谢！',
                        okText: '关闭'
                    });
                    return;
                }

                // if (this.dataSelected.find(x => x.ownerName !== this.$utils.getUserInfo().entrustingPartyName)) {
                //     this.$Message.error('请选择货主为当前所属客户的数据！');
                //     return;
                // }
                if (this.dataSelected.length > 0) {
                    if (type == 0) {
                        this.dataSelected.some((item) => {
                            if (item.indBlkRmU != 1 && item.supervisionStatus != 1 && item.goodsBondedProperty != 2) {
                                this.$router.push({
                                    name: 'goodsTransfer',
                                    query: {
                                        tableData: JSON.stringify(this.dataSelected),
                                        menuActiveName: JSON.stringify(this.menuActiveName),
                                        traceNum: JSON.stringify(item.traceNum),
                                        wareList:JSON.stringify(this.wareList),
                                        wmsUrl:JSON.stringify(this.wmsUrl),
                                        ccisCustomerCode:JSON.stringify(this.customerCode)
                                    }
                                })
                            } else {
                                this.$Message.warning('存在已冻结/已质押/保税的货品')
                                return true;
                            }
                        })
                    } else if (type == 1) {
                        this.dataSelected.some((item) => {
                            if (item.indBlkRmU != 1 && item.supervisionStatus != 1 && item.goodsBondedProperty != 2) {
                                this.$router.push({
                                    name: 'OutPlanInfo',
                                    query: {
                                        tableData: JSON.stringify(this.dataSelected),
                                        menuActiveName: JSON.stringify(this.menuActiveName),
                                        wareList:JSON.stringify(this.wareList),
                                        wmsUrl:JSON.stringify(this.wmsUrl),
                                        ccisCustomerCode:JSON.stringify(this.customerCode)
                                    }
                                })
                            } else {
                                this.$Message.warning('存在已冻结/已质押/保税的货品')
                                return true;
                            }
                        })
                    } else if (type == 2) {
                        this.containerDataSelected.forEach((item) => {
                            this.$nextTick(() => {
                                var a = setInterval(() => {
                                    this.dataInfoList.some((item) => {
                                        if (item.indBlkRmU != 1 && item.supervisionStatus != 1) {
                                            clearInterval(a)
                                            this.$router.push({
                                                name: 'bondedWarehousingInfo',
                                                query: {
                                                    tableData: JSON.stringify(this.dataInfoList),
                                                    menuActiveName: JSON.stringify(this.menuActiveName),
                                                    wareList:JSON.stringify(this.wareList),
                                                    wmsUrl:JSON.stringify(this.wmsUrl),
                                                    ccisCustomerCode:JSON.stringify(this.customerCode),
                                                    edit: true
                                                }
                                            })
                                        } else {
                                            clearInterval(a)
                                            this.$Message.warning('存在已冻结/已质押/保税的货品')
                                            return true;
                                        }
                                    })
                                },300)
                            })
                            this.speedOfProgressClick(item)
                            item.speedOfProgressShow = false;
                        })
                    }
                } else {
                    this.$Message.warning('未选择货物, 请选择货物')
                }
            }
        },
        printTc(item, status) {
            if (status == 'in') {
                this.orderNum = item,
                this.showPrintTC = true
            } else if (status == 'out') {
                this.orderNum = item,
                this.showPrintTCoutTo = true
            }
        },
        selectPrint(item, status) {
            if (status == 'in' || status == 'out') {
                let body = {
                    inPlanOrderNum: item,
                    orderNum: '',
                    type: status
                }
                selectPdf(body, this.wmsUrl).then(({data}) => {
                if (data.returnCode === 200) {
                    window.open(data.returnData.fileUrl, '_blank')
                } else {
                    this.$error(data.returnMsg, 3);
                }
                }).catch(err => {
                    this.$loginOut();
                });
            } else if (status == 'separation') {
                this.printData = {}
                let body = {
                    outPlanOrderNum: "",
                    orderNum: item
                }
                this.orderNum = item
                getSeparateOrderDetail(body,this.wmsUrl).then(response => {
                    if (response.data.returnCode === 200) {
                    this.printData = response.data.returnData
                    this.$nextTick( ()=> {
                        this.$refs.print.onPrint();
                    })
                    } else {
                    this.$error(response.data.returnMsg, 3);
                    }
                }).catch(err => {
                    console.log(err);
                });
            }
        },
        reset() {
            this.searchForm = {
                ownerCodeList: this.getOwnerCodeListDefault(),
                matTypCode: null,
                validatePeriod: null,
                supervisionStatus: null,
                productStatus: null,
                qualityStatus: null,
                dateInto: [],
                dateGen: [],
                dateExpire: [],
            };
            this.initData();
        },
        exportData() {
            // let selectedStkCodeArr = this.tableData.list.filter(item => item.checked).map(item => item.stkCode);
            // let body = {
            //     filterList: _.cloneDeep(this.tableData.filterList),
            //     searchLikeKey: this.tableData.searchKey,
            //     sortList: this.tableData.sortList
            // };
            let body;
            if (this.searchType === 'mat') {
                let selectedStkCodeArr = this.tableData.list.filter(item => item.checked).map(item => item.stkCode);
                body = {
                    filterList: _.cloneDeep(this.tableData.filterList),
                    searchLikeKey: this.tableData.searchKey,
                    sortList: this.tableData.sortList,
                    stkCodeList: selectedStkCodeArr
                };
            } else if (this.searchType === 'container') {
                let selectedStkCodeArr = this.tableData.list.filter(item => item.checked).map(item => item.stkCode);
                body = {
                    filterList: _.cloneDeep(this.tableData.filterList),
                    searchLikeKey: this.tableData.searchKey,
                    sortList: this.tableData.sortList,
                    stkCodeList: selectedStkCodeArr
                };
            }

            if (this.matSelected && this.matSelected.length > 0) {
                body.matNameList = this.matSelected.map(x => x.matName);
            }
            let ware = this.wareSelected.filter(item => item.id == this.menuActiveName)
            if (this.$utils.getUserInfo().currentAgentPermission) {
                body.ownerCodeList = this.ownerCodeList;
            } else {
                body.filterList.push({
                    filterKey: 'ownerCode',
                    filterValue: this.customerCode
                });
            }
            body.notInMatTypeCodeList = ['9999','0001'];
            exportSummaryExcel(body, this.wmsUrl).then((response) => {
                if (response.status === 200) {
                    this.$Message.success('导出成功');
                    fileDownload(response.data, '库存信息_' + ware[0].whName + '.xlsx');
                } else {
                    this.$Message.error('导出失败');
                }
            });
        },
        speedOfProgressClick(item) {
            item.speedOfProgressShow = !item.speedOfProgressShow;
            if (item.speedOfProgressShow) {
                item.arrowClass = 'top-arrow';

                let body = {
                    filterList: _.cloneDeep(this.tableData.filterList),
                    pageNum: this.tableData.pageNum,
                    pageSize: this.tableData.pageSize,
                    searchLikeKey: this.tableData.searchKey,
                    sortList: this.tableData.sortList
                };
                if (this.matSelected && this.matSelected.length > 0) {
                    body.matNameList = this.matSelected.map(x => x.matName);
                }
                body.filterList.push({
                    filterKey: 'batchAttr07',
                    filterValue: item.batchAttr07
                });

                body.filterList.push({
                    filterKey: 'ownerCode',
                    filterValue: item.ownerCode
                });

                body.filterList.push({
                    filterKey: 'settlementCustomer',
                    filterValue: item.settlementCustomer
                });
                body.filterList.push({
                    filterKey: 'dateInto',
                    filterValue: this.$utils.timestampToDate(item.dateInto)
                });
                // item.loading = true;
                stockPageList(body, this.wmsUrl).then(({ data }) => {
                    if (data.returnCode === 200) {
                        data.returnData.pageInfo.list.forEach(x => {
                            x.checked = false;
                        });
                        item.stockList = data.returnData.pageInfo.list;
                        console.log(item.stockList);
                        item.stockList.forEach(items => {
                            this.dataInfoList.push(items)
                        })
                    } else {
                        this.$Message.error(data.returnMsg);
                    }
                }).finally(() => {
                    item.loading = false;
                });
            } else {
                item.arrowClass = 'bottom-arrow';
            }
        },
        getFilterList() {
            this.tableData.filterList = [];
            if (this.searchForm.matTypCode) {
                this.tableData.filterList.push({
                    filterKey: 'matTypCode',
                    filterValue: this.searchForm.matTypCode
                });
            }
            if (this.searchForm.validatePeriod) {
                this.tableData.filterList.push({
                    filterKey: 'validatePeriod',
                    filterValue: this.searchForm.validatePeriod
                });
            }
            if (this.searchForm.supervisionStatus) {
                this.tableData.filterList.push({
                    filterKey: 'supervisionStatus',
                    filterValue: this.searchForm.supervisionStatus
                });
            }
            if (this.searchForm.productStatus) {
                this.tableData.filterList.push({
                    filterKey: 'productStatus',
                    filterValue: this.searchForm.productStatus
                });
            }
            if (this.searchForm.qualityStatus) {
                this.tableData.filterList.push({
                    filterKey: 'qualityStatus',
                    filterValue: this.searchForm.qualityStatus
                });
            }

            if (this.searchForm.dateInto && this.searchForm.dateInto.length > 0) {
                this.tableData.filterList.push({
                    filterKey: 'dateIntoStartDate',
                    filterValue: this.$utils.dateToDateStr(this.searchForm.dateInto[0])
                });
                this.tableData.filterList.push({
                    filterKey: 'dateIntoEndDate',
                    filterValue: this.$utils.dateToDateStr(this.searchForm.dateInto[1])
                });
            }
            if (this.searchForm.dateGen && this.searchForm.dateGen.length > 0) {
                this.tableData.filterList.push({
                    filterKey: 'dateGenStart',
                    filterValue: this.$utils.dateToDateStr(this.searchForm.dateGen[0])
                });
                this.tableData.filterList.push({
                    filterKey: 'dateGenEnd',
                    filterValue: this.$utils.dateToDateStr(this.searchForm.dateGen[1])
                });
            }
            if (this.searchForm.dateExpire && this.searchForm.dateExpire.length > 0) {
                this.tableData.filterList.push({
                    filterKey: 'dateExpireStart',
                    filterValue: this.$utils.dateToDateStr(this.searchForm.dateExpire[0])
                });
                this.tableData.filterList.push({
                    filterKey: 'dateExpireEnd',
                    filterValue: this.$utils.dateToDateStr(this.searchForm.dateExpire[1])
                });
            }
        },
        search() {
            this.initData();
        },
        getStock(whIds) {
            queryStock(whIds).then(({ data }) => {
                if (data.returnCode === 200) {
                    data.returnData.forEach(x => {
                        x.checked = false;
                    });
                    this.matList = data.returnData;
                } else {
                    this.$Message.error(data.returnMsg);
                }
            });
            queryStockList(whIds).then(({ data }) => {
                if (data.returnCode === 200) {
                    this.matWarehouseList = data.returnData;
                } else {
                    this.$Message.error(data.returnMsg);
                }
            });
        },
        getAllWare() {
            this.loading = true;
            getCurrentAgentPermissionWareHouse().then(({ data: returnData, message, error }) => {
                if (returnData) {
                    let wareData = returnData;
                    this.ccisWareList = returnData;
                    queryWarehouseStock(returnData.map(x => x.id)).then(({ data }) => {
                        if (data.returnCode === 200) {
                            data.returnData.forEach(x => {
                                x.checked = true;
                                x.whName = wareData.filter(item => item.id === x.whId)[0].whName;
                                this.temAndHumStorage(x);
                                x = Object.assign(x, wareData.filter(item => item.id === x.whId)[0]);
                            });
                            this.wareList = data.returnData;
                        } else {
                            this.$Message.error(data.returnMsg);
                        }
                    }).finally(() => {
                        this.loading = false;
                    });
                } else if (message) {
                    this.$Message.error(message);
                    this.loading = false;
                }
            });
        },
        temAndHumStorage(x) {
            const sec = new Date().getMinutes();

            let sto = localStorage.getItem(`temAndHum${x.id}`);
            if (sto) {
                let stos = sto.split(",");
                if (new BigNumber(stos[0]).minus(sec).abs() >= 10) {
                    this.temAndHum(x);
                } else {
                    x.temperature = stos[1];
                    x.humidity = stos[2];
                }
            } else {
                this.temAndHum(x);
            }
        },
        temAndHum(x) {
            x.temperature = Math.round(Math.random()*(22-18+1)+18);
            x.humidity = Math.round(Math.random()*(75-45+1)+45);
            localStorage.setItem(`temAndHum${x.id}`, `${new Date().getMinutes()},${x.temperature},${x.humidity}`);
        },
        wareClick(item) {
            item.checked = !item.checked;
        },
        matClick(item) {
            const matSelected = this.matList.filter(x => x.checked);
            if (matSelected.length > 4 && !item.checked) {
                this.$Message.warning('最多选择5项')
                return;
            }
            item.checked = !item.checked;
        },
        wareAllCheck() {
            this.wareAllChecked = !this.wareAllChecked;
            this.wareList.forEach(x => {
                x.checked = this.wareAllChecked;
            });
        },
        async initData() {
            this.getFilterList();
            let body = {
                filterList: _.cloneDeep(this.tableData.filterList),
                pageNum: this.tableData.pageNum,
                pageSize: this.tableData.pageSize,
                searchLikeKey: this.tableData.searchKey,
                sortList: this.tableData.sortList,
                notInMatTypeCodeList: ['9999','0001']
            };
            if (this.matSelected && this.matSelected.length > 0) {
                body.matNameList = this.matSelected.map(x => x.matName);
            }
            if(this.wmsUrl && this.searchForm.ownerCodeList.length) {
                await this.selectCustomerCode();
            }
            if (this.$utils.getUserInfo().currentAgentPermission) {
                body.ownerCodeList = this.ownerCodeList;
            } else {
                body.filterList.push({
                    filterKey: 'ownerCode',
                    filterValue: this.customerCode
                });
            }
            body.filterList.push({
                filterKey: 'ccis',
                filterValue: 'ccis'
            });
            if (this.cancel) {
                this.cancel();
            }
            let aCancelToken = new axios.CancelToken((c) => {
                this.cancel = c;
            });
            if (this.searchType === 'mat') {
                if (this.wmsUrl) {
                    this.tableData.loading = true;
                    stockPageList(body, this.wmsUrl, aCancelToken).then(({ data }) => {
                        if (data.returnCode === 200) {
                            data.returnData.pageInfo.list.forEach(x => {
                                x.checked = false;
                                x.speedOfProgressShow = false;
                            });
                            this.tableData.list = data.returnData.pageInfo.list;
                            this.tableData.total = data.returnData.pageInfo.total;
                            this.tableData.loading = false;
                        } else {
                            this.$Message.error(data.returnMsg);
                            this.tableData.loading = false;
                        }
                    }).finally(() => {
                    });
                }
            } else if (this.searchType === 'container') {
                if (this.wmsUrl) {
                    this.tableData.loading = true;
                    businessItemPageList(body, this.wmsUrl, aCancelToken).then(({ data }) => {
                        if (data.returnCode === 200) {
                            data.returnData.pageInfo.list.forEach(x => {
                                x.checked = false;
                                x.speedOfProgressShow = false;
                                x.loading = false;
                                x.stockList = [];
                            });
                            this.tableData.list = data.returnData.pageInfo.list;
                            this.tableData.total = data.returnData.pageInfo.total;
                            this.tableData.loading = false;
                        } else {
                            this.$Message.error(data.returnMsg);
                            this.tableData.loading = false;
                        }
                    }).finally(() => {
                    });
                }
            }
        },
        menuSelect(name) {
            this.menuActiveName = name;
        },
        pageChange(pageNum) {
            this.tableData.pageNum = pageNum;
            this.initData();
        },
        pageSizeChange(pageSize) {
            this.tableData.pageSize = pageSize;
            this.initData();
        },
        allCheckChange(val) {
            this.tableData.list.forEach(x => {
                x.checked = val;
            });
        },
        scrollChange(type) {
            let times = 0;
            let timer = setInterval(() => {
                if (type === 'left') {
                    document.getElementById('mat-container').scrollLeft -= 40;
                } else {
                    document.getElementById('mat-container').scrollLeft += 40;
                }
                times += 1;
                if (times >= 10) {
                    clearInterval(timer);
                }
            }, 20);
        },
        searchTypeChange() {
            this.initData();
        },
        getMatType() {
            matTypeQuery(this.wmsUrl).then(({ data }) => {
                if (data.returnCode === 200) {
                    this.matTypeList = data.returnData;
                } else {
                    this.$Message.error(data.returnMsg, 'error');
                }
            }).catch(err => {
                console.log(err);
            });
        },
        matTagClose(mat) {
            this.matList.forEach(x => {
                if (x.matName === mat.matName) {
                    x.checked = false;
                }
            });
        },
        async refresh() {
            this.loading = true;
            let response = await pushCcisStockInfo(this.ccisWareList.map(x => x.id));
            if (response.data.returnCode !== 200) {
                this.$Message.error(response.data.returnMsg);
                this.loading = false;
            }
            this.searchForm = {
                ownerCodeList: this.getOwnerCodeListDefault(),
                matTypCode: null,
                validatePeriod: null,
                supervisionStatus: null,
                productStatus: null,
                qualityStatus: null,
                dateInto: [],
                dateGen: [],
                dateExpire: [],
            };
            this.tableData.searchKey = '';
            this.getAllWare();
        },
        containerCheckChange(status, data) {
            data.stockList.forEach(x => {
                x.checked = status;
            });
        },
        async selectCustomerCode() {
          const {customerInfoList} = this.$utils.getUserInfo();
          this.customerCode = customerInfoList[0].customerPartyCode;
          this.ownerCodeList = [this.customerCode];
          // if (!this.wmsUrl) {
          //   return;
          // }
          //   const params = this.$utils.getUserInfo().currentAgentPermission ? { ccisCustomerCodeList: this.searchForm.ownerCodeList } : { ccisCustomerCode: this.$utils.getUserInfo().entrustingPartyCode };
          // let { data } = await selectCustomerInfoByDto(params, this.wmsUrl);
          //   if (data.returnCode === 200) {
          //       if (data.returnData && data.returnData.length > 0) {
          //
          //       }
          //   } else {
          //       this.$Message.error(rdata.returnMsg);
          //   }
        },
        pledgeApplication() {
            if (this.dataSelected.length === 0) {
                this.$Message.error('请先选择货物！');
                return;
            }
            let ownerName = this.dataSelected[0].ownerName;
            if (this.dataSelected.some(x => x.ownerName !== ownerName)) {
                this.$Message.error('请选择同一货主的货物！');
                return;
            }
            // 当前客户运营企业
            baseCodeApi.getCompanyByCustomerId(this.$utils.getUserInfo().entrustingParty).then(({ data }) => {
                if (data.returnCode === 200) {
                    this.customerCompanyList = data.returnData.map(i => {
                        return {
                            dictName: i.companyName,
                            dictValue: i.id
                        };
                    });
                    if (this.customerCompanyList && this.customerCompanyList.length > 0) {
                        this.selectCompanyId = this.customerCompanyList[0].dictValue;
                    }
                    this.businessTypeModalShow = true;
                } else {
                    this.$Message.error(data.returnMsg);
                }
            }).catch(err => {
                console.log(err);
            });
        },
        confirmSelectBusinessType() {
            let body = {
                whId: this.menuActiveName,
                matTypCodeList: this.dataSelected.map(x => x.matTypCode),
                commpanyId: this.selectCompanyId
            }
            baseCodeApi.getMatTypeByWmsMatType(body).then(({ data }) => {
                if (data.returnCode === 200) {
                    let mismatchList = [];
                    this.dataSelected.forEach(x => {
                        let matTypes = data.returnData.filter(item => item.matTypCode === x.matTypCode);
                        if (matTypes.length > 0) {
                            x.matType = matTypes[0].companyMatCode;
                        } else {
                            if (mismatchList.indexOf(x.matTypName) === -1) {
                                mismatchList.push(x.matTypName);
                            }
                        }
                        x.whId = this.menuActiveName;
                    });
                    if (mismatchList && mismatchList.length > 0) {
                        this.$Message.error('品类：' + mismatchList.join(',') + '系统中不存在！');
                        return;
                    }
                    this.$router.push({
                        name: 'orderAdd',
                        params: {
                            goods: this.dataSelected
                        },
                        query: {
                            label: '新建订单',
                            businessType: 'spotPledge',
                            companyId:this.selectCompanyId,
                            key: "new",
                            disabled: true,
                            showBtn: true,
                            ViewandEdit:true,
                            saveshow:true
                        }
                    });
                } else {
                    this.$Message.error(data.returnMsg);
                }
            });

        },

        getOwnerCodeListDefault() {
            return this.$utils.getUserInfo().currentAgentPermission
                ? this.$utils.getUserInfo().customerInfoList.map(i => i.customerPartyCode)
                : [this.$utils.getUserInfo().entrustingPartyCode];
        }
    },
    mounted() {
        // if (this.$route.params) {
        //     this.tableData.searchKey = this.$route.params.matName;
        //     this.searchForm.dateExpire = [new Date(this.$route.params.dateExpire), new Date(this.$route.params.dateExpire)]
        // }
    },
    watch: {
        $route: {
            handler(val) {
                if (val.params.dateExpire) {
                    this.tableData.searchKey = val.params.matName;
                    this.searchForm.dateExpire = [new Date(val.params.dateExpire), new Date(val.params.dateExpire)]
                } else {
                    this.searchForm.dateExpire = [];
                }
                this.initData();
            },
            immediate: true,
            deep: true
        },
        'tableData.list': {
            handler(val) {
                if (this.searchType === 'mat') {
                    this.dataSelected = val.filter(x => x.checked);
                    this.allCheck = this.dataSelected.length === this.tableData.list.length && this.dataSelected.length !== 0;
                }
                if (this.searchType === 'container') {
                    this.containerDataSelected = val.filter(x => x.checked);
                    this.dataSelected = val.reduce((arr, item) => arr.concat(item.stockList), []).filter(x => x.checked);
                    this.allCheck = this.containerDataSelected.length === this.tableData.list.length && this.containerDataSelected.length !== 0;
                }
            },
            deep: true
        },
        wareList: {
            handler(val) {
                this.wareSelected = val.filter(x => x.checked);
                this.wareAllChecked = this.wareSelected.length === this.wareList.length;

                if (this.wareSelected.length > 0) {
                    this.menuActiveName = this.wareSelected[0].whId;
                    this.$nextTick(() => {
                        if (this.$refs.wareMenu) {
                            this.$refs.wareMenu.updateActiveName();
                        }
                    });
                }

                if (this.wareSelected.length > 0) {
                    this.getStock(this.wareSelected.map(x => x.whId));
                } else {
                    this.matList = [];
                    this.tableData.list = [];
                }
            },
            deep: true
        },
        matList: {
            handler(val) {
                this.matSelected = val.filter(x => x.checked);
                if (this.wareSelected.length > 0) {
                    this.initData();
                } else {
                    this.tableData.list = [];
                }
            },
            deep: true
        },
        menuActiveName: {
            handler(val) {
                let data = this.wareList.filter(x => x.whId === val);
                if (data && data.length > 0) {
                    this.wmsUrl = data[0].ipProt;
                    this.initData();
                    this.searchForm.matTypCode = '';
                    this.getMatType();
                }
            }
        },
        '$store.state.user.userInfo': {
            handler(value) {
                if (!value || !value.entrustingPartyCode) return;
                this.getAllWare();
                this.$set(this.searchForm, 'ownerCodeList', this.getOwnerCodeListDefault());
                this.selectCustomerCode();
            },
            deep: true,
            immediate: true
        }
    }
};
</script>

<style lang="less">
.font-bold {
    font-weight: 700;
}
.search-container {
    position: relative;
    background-color: #fff;
    border-bottom: 1px solid rgba(217, 217, 217, 1);

    .warehouse, .stock {
        padding: 0 50px;
        .title {
            color: rgba(0, 0, 0, 0.85);
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 10px;
        }
    }
    .warehouse {
        padding-top: 30px;
    }
    .stock {
        padding-bottom: 30px;
    }

    .warehouse-itemnew, .warehouse-item {
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-width: 236px;
        height: 100px;
        border-radius: 4px;
        border: 1px solid rgba(217, 217, 217, 1);
        background-color: rgba(255, 255, 255, 1);
        padding: 10px 20px;
        color: rgba(0, 0, 0, 0.85);
        margin-right: 10px;
        transition: all .5s;

        &:hover {
            .warehouse-item__checked {
                border: 1px solid rgba(79, 104, 232, 1);
                background-color: rgba(79, 104, 232, 0.1);
            }
            .warehouse-item__not-checked {
                border: 1px solid rgba(217, 217, 217, 1);
                background-color: rgba(255, 255, 255, 1);
            }
        }
    }
    .warehouse-item__checked {
        border: 1px solid rgba(79, 104, 232, 1);
        background-color: rgba(79, 104, 232, 0.1);
    }
    .warehouse-item__not-checked {
        border: 1px solid rgba(217, 217, 217, 1);
        background-color: rgba(255, 255, 255, 1);
    }

    .bottom-btn, .bottom-btn2 {
        cursor: pointer;
        width: 50px;
        height: 0;
        display: block;
        position: absolute;
        left: 50%;
        bottom: -20px;
        border-top: 20px solid #fff;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        text-align: center;
        z-index: 100;
        transition: all .3s;
        font-size: 20px!important;

        &:hover  {
            transform: scale(1.2) translateY(1px);
        }
        &:hover+.bottom-btn2  {
            transform: scale(1.2) translateY(2px);
        }

        .ios-menu {
            position: absolute;
            top: -20px;
            right: 4px;
            transition: all .3s;
        }
    }
    .bottom-btn2 {
        width: 52px;
        bottom: -21px;
        border-top: 21px solid rgba(217, 217, 217, 1);
        z-index: 90;
    }
}

.content-container {
    margin-top: 10px;

    .ivu-menu-horizontal.ivu-menu-light:after {
        background: rgba(255, 255, 255, 0);
    }
    .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item-active, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu-active, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item:hover, .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu:hover {
        border-bottom: 4px solid rgba(79, 104, 232, 1) !important;
    }

    .nav-tab {
        background-color: #fff;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 30px;
    }

    .operation {
        padding: 20px 50px 10px;
    }

    .content {
        padding: 10px 30px;
    }
}

.speedOfProgress {
    cursor: pointer;
}

@keyframes arrowChange {
    100% {
        transform: rotate(180deg);
    }
}
@keyframes arrowChange2 {
    100% {
        transform: rotate(0);
    }
}
.top-arrow {
    animation: arrowChange .5s;
    animation-fill-mode: forwards;
    transform: rotate(0);
}
.bottom-arrow {
    animation: arrowChange2 .5s;
    animation-fill-mode: forwards;
    transform: rotate(180deg);
}
</style>
